import { defineComponent, watch, ref, onMounted, toRefs } from 'vue'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // const { xdata, data1, data2 } = toRefs(props.cdata.value)
    // 配置项
    let options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        auto: 'auto',
        bottom: '30px',
        // data: ['系列1', '系列2', '系列3', '系列4', '系列5'],
        // data: ['火力', '水力', '核电', '新能源'],
        data: ['火力', '水力', '核电', '新能源'],
        // 配置间距
        itemGap: 70,
        // 设置大小
        itemWidth: 40,
        itemHeight: 20,
        // 设置文字大小
        textStyle: {
          color: '#fff',
          fontSize: '32px'
        }
      },
      title: [
        {
          text: '主要能源发电装机量占比', // 左侧图的标题
          // 设置文字大小
          textStyle: {
            color: '#fff',
            fontSize: '40px'
          },
          top: '30px', // 标题水平位置：'left'/'center'/'right'
          left: '10%'
        },
        {
          text: '主要能源发电量占比', // 右侧图的标题
          textStyle: {
            color: '#fff',
            fontSize: '40px'
          },
          top: '30px',
          right: '13%'
        }
      ],
      grid: [
        { left: '100px', top: '15%', bottom: '8%', width: '40%', height: '66%' }, // Left bar chart
        { right: '3%', top: '15%', bottom: '8%', width: '40%', height: '66%' } // Right bar chart
      ],
      dataset: [
        {
          // Left bar chart data
          source: [
            ['类别', '火力', '水力', '核电', '新能源'],
            ['2024', 40, 22, 5, 33],
            ['2023', 43, 25, 5, 27],
            ['2022', 45, 22, 5, 28],
            ['2021', 48, 22, 8, 22],
            ['2020', 50, 22, 10, 18]
          ]
        },
        {
          // Right bar chart data
          source: [
            ['类别', '火力', '水力', '核电', '新能源'],
            ['2024', 54, 18, 10, 18],
            ['2023', 52, 16, 8, 24],
            ['2022', 52, 25, 6, 17],
            ['2021', 56, 16, 12, 16],
            ['2020', 55, 20, 13, 12]
          ]
        }
      ],
      xAxis: [
        {
          gridIndex: 0,
          type: 'value',
          axisLabel: {
            color: '#fff', // 设置y轴刻度字体颜色为深青色
            fontSize: 28
          },
          splitLine: {
            show: false
          },
          // 不显示 x 轴线
          axisLine: {
            show: false
          }
        }, // Left chart xAxis (value axis)
        {
          gridIndex: 1,
          type: 'value',
          axisLabel: {
            color: '#fff', // 设置y轴刻度字体颜色为深青色
            fontSize: 28
          },
          splitLine: {
            show: false
          },
          // 不显示 x 轴线
          axisLine: {
            show: false
          }
        } // Right chart xAxis (value axis)
      ],
      yAxis: [
        {
          gridIndex: 0,
          type: 'category',
          axisLabel: {
            color: '#fff', // 设置y轴刻度字体颜色为深青色
            fontSize: 28
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false // 不显示 y 轴线
          }
        }, // Left chart yAxis (category axis)
        {
          gridIndex: 1,
          type: 'category',
          axisLabel: {
            color: '#fff', // 设置y轴刻度字体颜色为深青色
            fontSize: 28
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false // 不显示 y 轴线
          }
        } // Right chart yAxis (category axis)
      ],
      series: [
        // Left bar chart series, set different colors
        {
          type: 'bar',
          seriesLayoutBy: 'column', // Horizontal bars
          datasetIndex: 0,
          xAxisIndex: 0,
          yAxisIndex: 0,
          stack: 'stack1',
          barWidth: '60%',
          itemStyle: {
            color: '#FEBC27' // Custom color
          }
        },
        {
          type: 'bar',
          seriesLayoutBy: 'column',
          datasetIndex: 0,
          xAxisIndex: 0,
          yAxisIndex: 0,
          stack: 'stack1',
          barWidth: '60%',
          itemStyle: {
            color: '#36AEC9' // Another color
          }
        },
        {
          type: 'bar',
          seriesLayoutBy: 'column',
          datasetIndex: 0,
          xAxisIndex: 0,
          yAxisIndex: 0,
          stack: 'stack1',
          barWidth: '60%',
          itemStyle: {
            color: '#BB4D22' // Another color
          }
        },
        {
          type: 'bar',
          seriesLayoutBy: 'column',
          datasetIndex: 0,
          xAxisIndex: 0,
          yAxisIndex: 0,
          stack: 'stack1',
          barWidth: '60%',
          itemStyle: {
            color: '#4791F0' // Another color
          }
        },
        // Right bar chart series, set different colors
        {
          type: 'bar',
          seriesLayoutBy: 'column',
          datasetIndex: 1,
          xAxisIndex: 1,
          yAxisIndex: 1,
          stack: 'stack2',
          barWidth: '60%',
          itemStyle: {
            color: '#FEBC27' // Custom color
          }
        },
        {
          type: 'bar',
          seriesLayoutBy: 'column',
          datasetIndex: 1,
          xAxisIndex: 1,
          yAxisIndex: 1,
          stack: 'stack2',
          barWidth: '60%',
          itemStyle: {
            color: '#36AEC9' // Another color
          }
        },
        {
          type: 'bar',
          seriesLayoutBy: 'column',
          datasetIndex: 1,
          xAxisIndex: 1,
          yAxisIndex: 1,
          stack: 'stack2',
          barWidth: '60%',
          itemStyle: {
            color: '#BB4D22' // Another color
          }
        },
        {
          type: 'bar',
          seriesLayoutBy: 'column',
          datasetIndex: 1,
          xAxisIndex: 1,
          yAxisIndex: 1,
          stack: 'stack2',
          barWidth: '60%',
          itemStyle: {
            color: '#4791F0' // Another color
          }
        }
      ]
    }

    onMounted(() => {
      if (chartRef.value) {
        chartRef.value.initChart(options)
      }
    })

    return () => {
      const height = '100%'
      const width = '100%'
      return <echart ref={chartRef} height={height} width={width} />
    }
  }
})
